<!--
 * @Author: kangjia kjhangzhou@163.com
 * @Date: 2022-09-29 09:57:51
 * @LastEditors: kangjia kjhangzhou@163.com
 * @LastEditTime: 2022-09-29 10:38:04
 * @FilePath: \boss-web-applet\pages\service\configs\record.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<!-- 历史记录 -->
	<view>
		<!-- 时间选择 -->
		<view class="text-right" style="margin-right: 30upx;">
			<image src="https://statics.xmcsrv.net/weixin/cloud/calendar.png" style="width:68upx;height: auto;" mode="widthFix" @tap="selectDate"></image>
		</view>
		<!-- <view class="hint-text">
			暂无通话记录
			<view class="">
				可点击“关联手机”添加手机号
			</view>
			<view class="">
				或点击“云电话”查看功能特权
			</view>
		</view> -->
		<scoll  ref="listRef" :typeName="urlParams.type" @scroll="handleScroll"></scoll>
		<!-- 日历 -->
		<datepicker :show="showPicker" type="range" :value="dateValue" begin-text="start" end-text="end"
			:show-seconds="true" color="#FF0025" format="yyyy-mm-dd" @confirm="handleConfirm" @cancel="handleCancel"></datepicker>
			
		<view class="next-button" v-if="urlParams.type == 'voes'">
			<view class="" @click="handleClick('setPhones')">
				关联手机
			</view>
			<view class="" @click="handleClick('call')">
				云电话
			</view>
		</view>
	</view>
</template>

<script>
import { getDeviceToken } from "@/API/api.js"
import datepicker from '../components/picker/datepicker'
import scoll from './scoll/scoll'
import {timeStartAndEnd} from '@/utils/index.js'
import storage from '@/jvss/pageCloud/utils/storage.js'
import logins from '@/utils/loginApi.js'
const {handleLogin,httpReturn} = logins();
export default {
	components: {
	  datepicker,
	  scoll
	},
	data() {
		return {
	        urlParams:{
				type:'',
				sn:''
			},
			token:'',
			showPicker: false,//是否显示日期模态框
			dateValue:storage.get('jfRecord') ? storage.get('jfRecord') : [timeStartAndEnd().startDate,timeStartAndEnd().endDate],//日期
			ALARMTYPE:{
				PIRAlarm:this.$t('JLink.alramType.PIRAlarm'),//徘徊检测告警
				HumanDetect:this.$t('JLink.alramType.HumanDetect'),//人形检测告警
				FaceDetection:this.$t('JLink.alramType.FaceDetection'),//人脸检测告警
				// FaceRecognition:t('alramType.FaceRecognition'),//人脸识别告警
				// appEventHumanDetectAlarm:t('alramType.AppEventHumanDetectAlarm'),//人形检测
			},
			deviceInfo:null
		}
	},
    onLoad(e) {
		this.deviceInfo = e
		const {sn,type} = e;
		this.urlParams = {
			sn,type
		}
    },
    onShow() {
		const {sn}= this.urlParams;
		let deviceId=sn;
		handleLogin(() => {
			getDeviceToken({deviceId}).then(res=>{
				this.token = res.token;
				this.$nextTick(()=>{
					this.$refs.listRef.handleLoad(this.token,this.dateValue,this.ALARMTYPE);//加载数据
				})
			}).catch(()=>{})
		})
		this.handleBack()
	},
    methods: {
		handleBack  (){},
		// 弹出时间模态框
		selectDate (){
			this.showPicker = true;
		},
		// 日期选择确认
		handleConfirm (e){
			this.showPicker = false;
			this.dateValue = e.value;
			storage.set('jfRecord',this.dateValue)
			this.$refs.listRef.handleLoad(this.token,this.dateValue,this.ALARMTYPE);//加载数据
		},
		// 日期模态框取消
		handleCancel(){
			this.showPicker = false;
			this.dateValue = this.$refs.listRef.dateValue;
		},
		handleClick(e){
			let item;
			if(e == 'setPhones'){
				item = {
					class: "text-left",
					icon: "setPhones",
					name: "关联手机",
					type: "voes"
				}
				const { icon, type } = item;
				const {sn,devName,u,p,adminToken,userGroupId,roomId,devIcon} = this.deviceInfo;
				this.$routing(`${this.$pages[icon]}?sn=${sn}&type=${type}&devName=${devName}&u=${u}&p=${p}&adminToken=${adminToken}&userGroupId=${userGroupId}&roomId=${roomId}&devIcon=${devIcon}&alarmEnable=false`)
			}else{
				item = {
					classifyId: "xmc.voes",
					icon: "xmcVoes",
					text: "云电话"
				}
				const { classifyId, icon } = item;
				this.$routing(`${this.$pages.introduce}${icon}?classifyId=${classifyId}`)
			}
		},
		handleScroll(){},
    },
	onUnload(){
		storage.remove('jfRecord')
	},
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
	.hint-text{
		text-align: center;
	}
	.next-button{
		z-index: 99;
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 40rpx;
		width: 100%;
		 view{
			width: 45%;
			border: 1rpx solid #FF0025;
			color: #FF0025;
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 10rpx;
			background-color: #fff;
		}
	}
</style>